<template>
	<div>
		<header class="aui-header">
			<a class="aui-pull-left aui-btn">
				<!--<span class="aui-iconfont aui-icon-left"></span>-->
				<img src="../assets/rightbut.png">
			</a>
			<div class="aui-title">登录友惠京选</div>
		</header>
		<div class="pwdcon">
			<div class="samesty">
				<span class="samename">手机号  </span>
				<input type="text" class="sameinput" placeholder="请输入手机号" ref="phone" maxlength="11">
			</div>
			<div class="samesty">
				<span class="samename">验证码</span>
				<input type="text" class="sameinput verfcode" placeholder="请输入验证码" ref="verfcode">
				<div v-show="show" class="indentcode" @click="getCode">获取验证码</div>
				<div v-show="!show" class="indentcode">{{count}} s</div>
			</div>
			<div class="stepbut" @click="stepbut">提交</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				listurl: [],
				newjson: [],
				hovered: false,
				count: '',
				timer: null,
				show: true,

			}
		},
		created() {

		},
		methods: {
			getCode() {
				const TIME_COUNT = 60;
				if(!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if(this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
				var phone = this.$refs.phone.value;
				var url = "http://develop.jhjvip.cn:8080/mall/mobile/login/code?phone=" + phone;
				this.$http.get(url).then(res => {

					this.listjson = res;

				})

			},
			stepbut:function(){
				var phone = this.$refs.phone.value;
				var verfcode = this.$refs.verfcode.value;
				var url = "http://develop.jhjvip.cn:8080/mall/mobile/login/in?phone="+phone+'&code='+verfcode+'&appId=gzh'
				this.$http.get(url).then(res => {
					console.log(res);
					this.listurl = res;
					var token = res.data.token;
					this.$router.push({ path: '/restpwd?token='+token })
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.pwdcon {
		margin-top: 1.2rem;
		padding: 0.25rem;
		background-color: #FFFFFF;
	}
	
	.samesty {
		width: 100%;
		height: 0.6rem;
		line-height: 0.6rem;
		border-bottom: solid 0.01rem #CCCCCC;
		margin-top: 0.2rem;
	}
	
	.samename {
		display: inline-block;
		color: #989898;
		width: 15%;
	}
	
	.sameinput {
		display: inline-block;
		height: 0.5rem;
		line-height: 0.5rem;
		width: 75%;
		outline: none;
		margin-left: 0.1rem;
	}
	
	.samesty:nth-child(1) {
		margin-top: 0rem;
	}
	
	.verfcode {
		width: 40%;
	}
	
	.indentcode {
		display: inline-block;
		float: right;
		border: solid 1px #ff2040;
		height: 0.5rem;
		padding: 0 0.1rem;
		color: #ff2040;
		line-height: 0.5rem;
		font-size: 0.24rem;
	}
	
	.stepbut {
		width: 100%;
		height: 0.8rem;
		background-color: #FF2040;
		text-align: center;
		line-height: 0.8rem;
		color: #fff;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		border-radius: 0.4rem;
	}
</style>